<template>
  <div class="toast" v-show="isShow">
    <div>{{message}}</div>
  </div>
</template>

<script>
  export default {
    name:"Toast",
    // props:{
    //   message:{
    //     type:String,
    //     default:''
    //   },
    //   show:{
    //     type:Boolean,
    //     default:false
    //   }
    // },
    data(){
      return {
        message:"",
        isShow:false
      }
    },
    methods: {
      show(message,duration=1500){
        this.isShow = true
        this.message = message
        setTimeout(()=>{
          this.isShow = false
          this.message = ""
        },duration)
      }
    },
  }
</script>

<style scoped>
   .toast {
     position:fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
     width: 250px;
     height: 60px;
     text-align: center;
     line-height: 60px;
     background-color: #000;
     color: #fff;
     opacity: 0.7;
     border-radius: 10px;
     font-size: 18px;
     font-weight: 550;
     z-index: 9999;
   }
</style>